<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 600px;
            height: 400px;
            background: yellow;
            position: absolute;
            left: 0;
            top: 0;
        }
       .box .top{
       		width: 600px;
       		height: 40px;
       		text-align: center;
       		line-height: 40px;
       		background: #ccc;
       }
    </style>
</head>
<body>
    <div id="box">
    	<div class="top">
    		<h3>网站登录</h3>
    	</div>
    	<div class="bottom">
    		
    	</div>
    </div>
</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        $("#box").bind("mousedown",function (e) {
            var disX = e.clientX - $(this).offset().left;
            var disY = e.clientY - $(this).offset().top;
            $(document).bind("mousemove",function (e) {
                var l = e.clientX - disX;
                var t = e.clientY - disY;
                if(l < 0){
                    l = 0;
                }
                if(l > $(window).width() - $("#box").outerWidth()){
                    l = $(window).width() - $("#box").outerWidth();
                }
                if(t > $(window).height() - $("#box").outerHeight()){
                    t = $(window).height() - $("#box").outerHeight()
                }
                if(t < 0){
                    t = 0;
                }
                $("#box").css({
                    left : l,
                    top : t
                })
            })
            $(document).bind("mouseup",function () {
                $(document).unbind("mousemove");
                $(document).unbind("mouseup");
            })

            return false;
        })

    })
</script>